<template>
    <view class="jk-page-container bg">
        <u-sticky>
            <view class="search-bar">
                <view class="search-bar-top-box">
                    <view class="search-bar-item" style="border-right: solid 1rpx #5c7cf7;" @click="onClickWorkshop">
                        <view class="search-bar-item-val">{{ searchParams.workshopName || '车间' }}</view>
                        <u-icon name="arrow-down-fill" size="14" color="#fff"></u-icon>
                    </view>
                    <view class="search-bar-item">
                        <view class="search-bar-item-val">{{ '订单' }}</view>
                        <u-icon name="arrow-down-fill" size="14" color="#fff"></u-icon>
                    </view>
                </view>
                <view class="flex-center" style="display: flex;justify-content: center;width: 100%;">
                    <u-search
                        :inputStyle="{ width: '100%',height: '38px' }"
                        shape="square"
                        placeholder="品种编号或名称"
                        height="68rpx"
                        v-model="searchParams.productNameOrCode"
                        :disabled="true"
                        actionText="筛选"
                        :actionStyle="{ fontSize: '16px' }"
                        @search="onMoreBtn"
                        @clear="onMoreBtn('')"
                        @custom="onMoreBtn"
                        @click="onMoreBtn"
                    ></u-search>
                </view>
            </view>
        </u-sticky>

        <view class="column-list-container">
            <view v-for="(item) in tableData" :key="item.id" class="column-list-item">
                <view class="column-list-item-default flex-between-center">
                    <view class="column-list-item-title">{{ item.productName }}</view>
                    <view class="column-list-item-sub-title">
                        <open-state-bar :status="item.openingState"></open-state-bar>
                    </view>
                </view>
                <view class="column-list-item-default column-list-item-sub-title">生产批号：{{ item.batchCode }}</view>
                <view class="column-list-item-default column-list-item-sub-title">订单编号：{{ item.productOrderCode }}</view>
                <view class="column-list-item-default column-list-item-sub-title">订单数量：{{ item.productOrder ? item.productOrder.orderQty : 0 }}</view>
                <view class="column-list-item-default column-list-item-sub-title">纸管颜色：{{ item.productOrderBatchItem && item.productOrderBatchItem.paperTubeList ? item.productOrderBatchItem.paperTubeList.map(x => x.name).join() : '' }}</view>
                <view style="font-weight: 300;">
                    <u-button @click="onToOpenBtn(item)" type="text" size="normal">选择</u-button>
                </view>
            </view>
            <jk-no-more :pageNo="searchParams.pageNo" :show="isNoMore" />
        </view>
        <jk-popup :show="showSearchBar" :closeOnClickOverlay="false" title="搜索栏" @close="onCloseSearchBar">
            <view style="max-height: 400px;overflow: auto;">
                <view class="search-popup-item">
                    <view class="search-popup-item-label">订单编号:</view>
                    <u-input
                        v-model="searchParams.productOrderCode"
                        :clearable="false"
                        :customStyle="{
                            height: '38px',
                            background:'#F2F5FF',
                        }"
                    ></u-input>
                </view>
                <view class="search-popup-item">
                    <view class="search-popup-item-label">品种:</view>
                    <u-input
                        v-model="searchParams.productNameOrCode"
                        :clearable="false"
                        :customStyle="{
                            height: '38px',
                            background:'#F2F5FF',
                        }"
                        @clear="onClearProduct"
                    ></u-input>
                </view>
                <view class="search-popup-item">
                    <view class="search-popup-item-label">批号:</view>
                    <u-input
                        v-model="searchParams.batchCode"
                        :clearable="false"
                        :customStyle="{
                            height: '38px',
                            background:'#F2F5FF',
                        }"
                        @clear="onClearBatchCode"
                    ></u-input>
                </view>
                <u-button class="margin-top-30" @click="onConfirmOfSearchBarBtn"  icon="search" type="primary" color="#4E7CFE" size="large">搜索</u-button>
            </view>
        </jk-popup>
    </view>
</template>

<script>
import {
    productionPrdNoticePage,
    spinProcessPage,
    systemAuthGetPermissionInfo,
} from "../../../../api";
import {
    isLastPage,
    pageConfig,
    showLoading
} from "../../../../utils/jk-utils";
import loadingMore from '../../../../mixins/loading-more';
import jkNoMore from "../../../../jk-components/jk-no-more";
import jkSearchBar from "../../../../jk-components/jk-search-bar";
import openStateBar from "../../openMachine/open-state-bar";
import jkPopup from "../../../../jk-components/jk-popup";
export default {
    mixins: [loadingMore],
    components: {
        jkPopup,
        jkNoMore,
        jkSearchBar,
        openStateBar
    },
    data() {
        return {
            apiConfig: {
                list: productionPrdNoticePage
            },
            showSearchBar: false,
            searchParams: {
                pageNo: 1,
                pageSize: pageConfig.pageSize,
                totalCount: pageConfig.totalCount,
                productNameOrCode: '',
                batchCode: '',
                workshopId: null,
                workshopName: '',
                productOrderCode: '',
                processCode: 'XS',
                processName: '',
                auditStates: '2,3,4,5'
            },
            tableData: [],
            workshopList: [],
            processList: [{
                code: 'XS',
                name: '细纱'
            },
                {code: 'CS', name: '粗纱'},
                {code: 'MB', name: '末并'},
                {code: 'TB', name: '头并'},
                {code: 'SM', name: '梳棉'},
                {code: 'QH', name: '清花'}
            ]
        }
    },
    onLoad() {
    },
    onShow() {
        this.getDependentData();
    },
    methods: {
        onClearProduct() {
            uni.showToast({title: '触发'});
            this.$set(this.searchParams,'productNameOrCode', '');
        },
        onClearBatchCode() {
            uni.showToast({title: '触发'});
            this.$set(this.searchParams,'batchCode', '');
        },
        onMoreBtn() {
            this.showSearchBar = true;
        },
        onCloseSearchBar() {
            this.showSearchBar = false;
        },
        onConfirmOfSearchBarBtn() {
            this.getListRequest();
            this.showSearchBar = false;
        },
        onClickProcess() {
            let _this = this;
            uni.showActionSheet({
                itemList: _this.processList.map(x => x.name),
                success(res) {
                    _this.$set(_this.searchParams, 'processCode', _this.processList[res.tapIndex].code);
                    _this.$set(_this.searchParams, 'processName', _this.processList[res.tapIndex].name);
                    _this.getListRequest();
                }
            });
        },
        onClearOfSearchIpt() {
            this.$set(this.searchParams, 'productName', '');
            this.onSearchBtn();
        },
        onToOpenBtn({id}) {
            uni.redirectTo({
                url: `/pages/production/ltPrd/selectProductList/toOpen?id=${ id }`
            })
        },
        onSearchBtn(e) {
            this.tableData = [];
            this.$set(this.searchParams, 'productName', e);
            this.getListRequest();
        },
        getProcessListRequest() {
            return spinProcessPage({
                auditState: 1
            }).then(res => {
                if (res.data.status === 200) {
                    let item = res.data.res.find(x => x.code.toUpperCase() === 'XS');
                    if (item) {
                        this.$set(this.searchParams, 'processCode', item.code);
                        this.$set(this.searchParams, 'processName', item.name);
                    }
                    this.processList = res.data.res;
                }
            });
        },
        getWorkshopDataRequest() {
            return systemAuthGetPermissionInfo().then(res => {
                if (res.data.status === 200) {
                    if (!this.searchParams.workshopId) {
                        this.$set(this.searchParams, 'workshopId', res.data.res.workshop.defaultWorkshopId);
                        this.$set(this.searchParams, 'workshopName', res.data.res.workshop.defaultWorkshopName);
                    }
                    this.workshopList = getApp().globalData.defaultWorkshop.list;
                }
            })
        },
        async getDependentData() {
            showLoading(true);
            this.searchParams.pageNo = 1;
            await this.getWorkshopDataRequest();
            if (this.searchParams.workshopId) await this.getListRequest();
            showLoading(false);
        },
        getListRequest() {
            if (this.searchParams.workshopId) {
                showLoading(true);
                this.searchParams.pageNo = 1;
                return this.apiConfig.list(this.searchParams).then(res => {
                    showLoading(false);
                    if (res.data.status === 200) {
                        this.$set(this.searchParams, 'totalCount', res.data.count);
                        this.tableData = res.data.res;
                        this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize,
                            this.searchParams.pageNo);
                    }
                })
            }
        },
        onClickWorkshop() {
            let _this = this;
            uni.showActionSheet({
                itemList: _this.workshopList.map(x => x.workshopName),
                success(res) {
                    _this.$set(_this.searchParams, 'workshopId', _this.workshopList[res.tapIndex].workshopId);
                    _this.$set(_this.searchParams, 'workshopName', _this.workshopList[res.tapIndex]
                        .workshopName);
                    _this.getListRequest();
                }
            });
        }
    },
    onReachBottom() {
        this.getMore();
    }
}
</script>
<style lang="scss" scoped>
// 搜索栏样式
.search-bar {
    width: 100%;
    height: 96px;
    background: #fff;
    padding: 0 0px 8px 0px;
    box-sizing: border-box;
    box-shadow: 0px 0px 3px 1px #c5c8ce;
    .search-bar-top-box {
        height: 48px;
        display: flex;
        border-top: solid 1rpx #e8eaec;
        .search-bar-item {
            width: 50%;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #515a6e;
            box-sizing: border-box;

            .search-bar-item-val {
                margin-right: 8rpx;
                font-size: 30rpx;
            }
        }
    }

}
</style>
